<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解构用途总结</title>
</head>

<body>
    <p>1. 变量变换</p>
    <pre>
        let x=1;
        let y=2;
        [x,y]=[y,x];
      </pre
    >
    <hr />
    <p>2. 函数返回多个值的提取</p>
    <pre>
      function returnArr(){
        return [1,2,3]
      }
      let [a,b,c] = returnArr();
      function returnObj(){
        return {
            foo:1,
            bar:2
        }
      }
      let {foo,bar} = returnObj();
    </pre>
    <hr />
    <p>3. 函数的参数定义</p>
    <pre>
        function f([x,y,z]){
          // to do something
          return x+y+z;
        }
        f([1,2,3])  
        
        function f({x,y,z}){
          // to do something
          return x+y+z;
        }
        f({x:1,y:2,z:3})
    </pre>
</body>

</html>
<script>
    let x = 1;
    let y = 2;
    [x, y] = [y, x];
    console.log(x);
    console.log(y);
    console.log("-------------");

    function returnArr() {
        return [1, 2, 3];
    }
    let [a, b, c] = returnArr();
    console.log(a);
    console.log(b);
    console.log(c);
    console.log("-------------");

    function returnObj() {
        return {
            foo: 1,
            bar: 2,
        };
    }
    let {
        foo,
        bar
    } = returnObj();
    console.log(foo);
    console.log(bar);
    console.log("-------------");

    function f1([x, y, z]) {
        // to do something
        console.log(x + y + z);
    }
    f1([1, 2, 3]);

    function f2({
        x,
        y,
        z
    }) {
        // to do something
        return x + y + z;
    }
    f2({
        x: 1,
        y: 2,
        z: 3,
    });
</script>